<template>
  <div class="warp">
    <div class="inp">
      <div class="logo">
        <img src="../../../static/img/1.png">
      </div>
      <div>
        <el-input v-model="username" placeholder="请输入用户名" size="medium" style="width:70%;height:40px;"></el-input>
        <el-input v-model="password" type="password" placeholder="请输入密码" size="medium"  style="width:70%;height:40px;"></el-input>
        <el-button type="primary" size="medium" style="width:70%;height:40px;" @click="fnSignIn()" v-loading.fullscreen.lock="Loading">登录</el-button>
      </div>
    </div>
    <div class="mask"></div>
  </div>
</template>

<script>
import Api from "../../kites/api";
export default {
  name: "Login",
  data() {
    return {
      Loading: false,
      username: "",
      password: ""
    };
  },
  mounted() {},
  methods: {
    fnSignIn() {
      var me = this;
      this.Loading = true;
      this.$axios
        .post(Api.signin, {
          Login: this.username,
          Pwd: md5(this.password),
          openid: localStorage.openid
        })
        .then(res => {
          if (res.data.isOK) {
            me.Loading = false;
            localStorage.Login = res.data.data.Login;
            localStorage.Token = res.data.data.Token;
            me.$axios.defaults.headers.common['token']=localStorage.Token
            me.$router.push("/home");
          } else {
            me.Loading = false;
            me.$message.error(res.data.msg);
          }
        })
        .catch(function(error) {
          me.Loading = false;
          me.$message.error("登录失败");
        });
    }
  }
};
</script>

<style scoped>
.warp {
  width: 100%;
}

.logo {
  width: 10rem;
  height: 10rem;
  margin: auto;
  border-radius: 50%;
  margin-bottom: 8rem;
}

.logo img {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
}

.inp {
  position: absolute;
  width: 100%;
  z-index: 100;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.el-input {
  width: 80%;
  margin-bottom: 10px;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: url("../../../static/img/3.jpg") no-repeat center center fixed;
  background-repeat: no-repeat;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  /* -webkit-filter: blur(10px);
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);     */
  z-index: 1;
}
</style>
